<template>
<div class="app-container">
  <el-row>
    <el-col :span="24">
      <div class="top-box">
        <div>
          <span>订单状态:<span>{{ orderDetail.order_status | orderStatus }}</span></span>
          <span v-if="top.joined">已参团{{orderDetail.ping_number}}人，还差{{top.differ}}人拼成，剩余时间：{{top.lastTime}}</span>
        </div>
        <div>
          <span v-if="top.payLastTime">支付剩余时间:{{top.payLastTime}}</span>
        </div>
        <div>
          <span>订单编号:{{orderDetail._id}}</span>
          <span>{{top.orderType}}</span>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-form ref="form" label-width="160px">
    <div class="title">用户信息</div>
    <el-form-item label="用户昵称:">
      {{ orderDetail.user_id.nickname }}
    </el-form-item>
    <el-form-item label="服务地址:">
      {{ orderDetail.user_address_id.address_name }}
    </el-form-item>
    <el-form-item label="联系人:">
      {{ orderDetail.user_address_id.user_name }}
    </el-form-item>
    <el-form-item label="联系方式:">
      {{ orderDetail.user_address_id.mobile_phone }}
    </el-form-item>
  </el-form>
  <el-form ref="form" label-width="160px">
    <div class="title">订单信息</div>
    <el-form-item  label="下单时间:">
      {{ orderDetail.order_time | fomateTime }}
    </el-form-item>
    <el-form-item label="支付方式:">
      {{ orderDetail.order_pay_type | pay_type }}
    </el-form-item>
    <!-- <el-form-item v-if="orderDetail.thirdy_pay_order" label="支付时间:">

    </el-form-item> -->
    <el-form-item v-if="orderDetail.thirdy_pay_order" label="第三方交易号:">
      {{ orderDetail.thirdy_pay_order }}
    </el-form-item>
    <el-form-item v-if="order.startTime" label="成团时间:">
      <span v-text="order.startTime"></span>
    </el-form-item>
    <el-form-item v-if="orderDetail.send_order_time" label="平台派单时间:">
      {{ orderDetail.send_order_time | fomateTime }}
    </el-form-item>
    <el-form-item v-if="orderDetail.business_send_order_time" label="商家派单时间:">
      {{ orderDetail.business_send_order_time | fomateTime }}
    </el-form-item>
    <el-form-item v-if="order.service" label="服务人员上门时间:">
      <span v-text="order.service"></span>
    </el-form-item>
    <el-form-item v-if="order.visit" label="确认服务人员上门时间:">
      <span v-text="order.visit"></span>
    </el-form-item>
    <el-form-item v-if="order.confirm" label="服务人员确认订单时间:">
      <span v-text="order.confirm"></span>
    </el-form-item>
    <el-form-item v-if="order.serviceBegin" label="开始服务时间:">
      <span v-text="order.serviceBegin"></span>
    </el-form-item>
    <el-form-item v-if="order.serviceEnd" label="服务人员服务结束时间:">
      <span v-text="order.serviceEnd"></span>
    </el-form-item>
    <el-form-item v-if="order.end" label="订单完成时间:">
      <span v-text="order.end"></span>
    </el-form-item>
  </el-form>
  <div class="title" v-if="busniess.busName">商家信息</div>
  <el-form ref="form" label-width="160px">
    <el-form-item v-if="busniess.busName" label="商家名称:">
      <span  v-text="busniess.busName"></span>
    </el-form-item>
    <el-form-item v-if="busniess.busName" label="商家地址:">
      <span v-text="busniess.busAdress"></span>
    </el-form-item>
    <el-form-item v-if="busniess.busPer" label="商家联系人:">
      <span v-text="busniess.busPer"></span>
    </el-form-item>
    <el-form-item v-if="busniess.busTel" label="商家联系方式:">
      <span v-text="busniess.busTel"></span>
    </el-form-item>
  </el-form>
  <div class="title">服务信息</div>
  </br>
  <div class="bottom-table">
    <el-table :data="service" border>
      <el-table-column align="center" prop="service" label="服务">
      </el-table-column>
      <el-table-column align="center" prop="time" label="服务时间">
      </el-table-column>
      <el-table-column align="center" prop="orderMon" label="订单金额">
      </el-table-column>
      <el-table-column align="center" prop="payMon" label="实付金额">
      </el-table-column>
    </el-table>
  </div>
  <div class="sendOrder">
    <el-button v-if="orderDetail.order_status == 4" @click="dialogVisible = true" type="primary">派单</el-button>
    <el-button @click="back" type="info">返回</el-button>
  </div>
  <el-dialog
    title="派单"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <div class="">
      选择商家
      <el-select v-model="bus" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false;push()">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import { validateOrderStatus } from '@/utils/validate'
import { formatDate } from '@/utils/index'
import request from '@/utils/request'
export function getList(mes,url) {
  return request({
    url: url,
    method: 'post',
    data: mes
  })
}
export default {
  methods:{
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    back() {
      this.$router.go(-1)
    },
    push() {
      let n = {
        order_id: this.orderDetail._id,
        bussiness_id: this.bus
      }
      console.log(n)
      getList(n,'/v1/admin/order/sendBusiness').then(res => {
          if (res.code === 200) {
            console.log(res);
            this.$message({
              message: 'success!',
              type: 'success'
            });
            this.$router.go(-1)
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          });
      });
    }
  },
  data(){
    return{
      top:{
        state:'未支付',
        joined:5,
        differ:4,
        lastTime:'02:42:23',
        payLastTime:'02:42:23',
        orderId:'180816-0747123456',
        orderType:'拼团订单'
      },
      active:0,
      user:{
        name:'马八',
        address:'天堂',
        person:'马*',
        personTel:'12312312312',
      },
      order:{
        payname:'2018 09 01 04:00pm',
        payType:'未支付',
        // beginTime:'2018 09 01 04:00pm',
        // payType:'支付包',
        // paytime:'2018 09 01 04:00pm',
        // payid:'2018073021001001700574109819',
        // startTime:'2018 09 01 04:00pm',
        // terrace:'2018 09 01 04:00pm',
        // bus:'2018 09 01 04:00pm',
        // service:'2018 09 01 04:00pm',
        // visit:'2018 09 01 04:00pm',
        // confirm:'2018 09 01 04:00pm',
        // serviceBegin:'2018 09 01 04:00pm',
        // serviceEnd:'2018 09 01 04:00pm',
        // end:'2018 09 01 04:00pm'
      },
      service:[],
      busniess:{
        // busName:'洁云家政',
        // busAdress:'上海市黄埔区蒙自路169号',
        // busPer:'易烊千玺',
        // busTel:'+86 18512345678',
      },
      personMes:{
        logo:'',
        name:'messi',
        tel:'12312312311',
        id:'2313123',
        age:'24',
        sex:'man',
        pleace:'shanghai',
        skill:'eat',
        busId:'sadda',
        face:'',
        bak:''
      },
      orderDetail: {},
      dialogVisible: false,
      options: [],
      bus: ''
    }
  },
  created() {
    this.orderDetail = JSON.parse(localStorage.getItem('orderDetail'))
    console.log(this.orderDetail)
    const item = {
      service: this.orderDetail.service_title,
      time: this.orderDetail.service_time ? formatDate(new Date(this.orderDetail.service_time*1000), 'yyyy-MM-dd  hh:mm') : '无' ,
      orderMon: '￥' + this.orderDetail.order_money,
      payMon: '￥' + this.orderDetail.order_pay_money
    }
    this.service.push(item)

    console.log(111);
    const n = {
      page: 1,
      size: 1000
    }
    getList(n,'/v1/admin/business').then(res => {
        if (res.code === 200) {
          res.data.list.filter(item => {
            const val = {
              value: item._id,
              label: item.company_name
            }
            this.options.push(val)
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
    });
  },
  filters: {
    orderStatus(item) {
      return validateOrderStatus(item)
    },
    fomateTime(time) {
      return time ? formatDate(new Date(time*1000), 'yyyy-MM-dd  hh:mm') : '无'
    },
    pay_type(type) {
      if (type === 1) {
        return '支付宝'
      } else if (type === 2) {
        return '微信'
      } else if (type === 0) {
        return '其他'
      }
    }
  }
}
</script>

<style scoped>
.el-steps {
  margin: 20px 0;
}

.el-form-item {
  margin: 0;
}

.title {
  line-height: 30px;
  font-weight: bold;
  border-left: 5px solid #a2c33d;
  padding-left: 10px;
  margin: 5px;
}

.top-box {
  background: #eaf4fd;
  padding: 10px;
  border: 1px solid #d4e4f3;
}

.top-box div {
  display: flex;
  justify-content: space-between;
  margin: 10px;
}

.state {
  width: 10%;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
}

.footer {
  line-height: 30px;
  font-weight: 600;
  margin-top: 20px;
  border-bottom: 1px solid #d4d4d4;
}

.footer div {
  display: inline-block;
  width: 120px;
  text-align: center;
}

.footer div:hover {
  background: #d4e4f3;
}

.sendOrder {
  margin: 10px;
}

.bottom-table {
  border-top: 1px solid #d4d4d4;
}
</style>
